<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>	Watch 选项 监控数据</title>
	<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
	<h1>Watch 选项 监控数据</h1>
	<hr>
	<div id="app">
        <p>今日温度： {{wendu}} 度</p>
        <p>今日穿衣： {{chuanyi}}</p>
        <div>
			<button @click="addwen">升高温度</button>
			<button @click="delwen">降低温度</button>
        </div>

	</div>
	<header></header>
    

</body>
<script type="text/javascript">
var chuanyiArray=['t恤短袖','夹克长裙','棉衣']
var app = new Vue({
	el:'#app',
	data:{
		wendu:14,
		chuanyi:'夹克长裙'
	},
	methods:{
		addwen:function () {
			this.wendu+=5;
		},
		delwen:function () {
			this.wendu-=5;
		}
	},
	// watch:{
	// 	wendu:function (newVal,oldVal) {
	// 		if (newVal>=26) {
	// 			this.chuanyi=chuanyiArray[0];
	// 		}else if (newVal<26 && newVal>0) {
	// 			this.chuanyi=chuanyiArray[1];
	// 		}else{
	// 			this.chuanyi=chuanyiArray[2];
	// 		}
	// 	}
	// }
})
app.$watch('wendu',function (newVal,oldVal) {
	if (newVal>=26) {
		this.chuanyi=chuanyiArray[0];
	}else if (newVal<26 && newVal>0) {
		this.chuanyi=chuanyiArray[1];
	}else{
		this.chuanyi=chuanyiArray[2];
	}
})
</script>
</html>